<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../../kq.dev.js"></script>
<script type="text/javascript" src="kq.svg.js"></script>
<style>
#mydiv{
	width: 500px;
    height: 550px;
}
</style>
</head>

<body>
<div id="mydiv"></div>
</body>

<script>
var svg = new $Q.plugIn.Svg({
	width:1000,
	height:1100
});
var mx = 10;
var my = 11;
svg.mx = 10;
svg.my = 11;
svg.isRed  = 0;//是否为红棋
svg.pointx = svg.width / mx;
svg.pointy = svg.height / my;
svg.bluePoint = function(point,dlen){
	var unit = -1;
	return [
		svg.pointx * (point[0]) + unit*dlen[0],
		svg.pointy * (my - point[1]) + unit*dlen[1]
	]
}
svg.redPoint = function(point,dlen){
	var unit = -1;
	return [
		svg.pointx * (mx - point[0]) + unit*dlen[0],
		svg.pointy * (point[1]) + unit*dlen[1]
	]	
}
svg.addRect({
	fill:"#dee",
	width:svg.width,
	height:svg.height,
	x:0,
	y:0
});
for(var i = 1;i<mx;i++){
	svg.addLine({
		x1:i*svg.pointx,y1:svg.pointy,x2:i*svg.pointx,y2:svg.height - svg.pointy
	});
}
for(var i = 1;i<my;i++){
	svg.addLine({
		
		x1:svg.pointx,y1:i*svg.pointy,x2:svg.width - svg.pointx,y2:i*svg.pointy
	});
}
//创建点的相关信息
svg.addRect({
	width:svg.width - 2 * svg.pointx,	
	height:svg.pointy,
	x:svg.pointx,
	y:5 * svg.pointy,
	fill:"#fff"
});
//创建台位的点的信息
svg.addLine({
	x1 : 4 * svg.pointx,
	y1 : 1 * svg.pointy,
	x2 : 6 * svg.pointx,
	y2 : 3 * svg.pointy
});
svg.addLine({
	x1 : 4 * svg.pointx,
	y1 : 3 * svg.pointy,
	x2 : 6 * svg.pointx,
	y2 : 1 * svg.pointy
});
svg.addLine({
	x1 : 4 * svg.pointx,
	y1 : 8 * svg.pointy,
	x2 : 6 * svg.pointx,
	y2 : 10 * svg.pointy
});
svg.addLine({
	x1 : 4 * svg.pointx,
	y1 : 10 * svg.pointy,
	x2 : 6 * svg.pointx,
	y2 : 8 * svg.pointy
});
svg.livepiece = [];//当前存活的棋子
//去除所有棋子的兵势，活着的
svg.emptyLivepieceNext = function(){
	for(var i=0;i<svg.livepiece.length;i++){
		var itm = svg.livepiece[i].nextlist;
		for(var j = 0;j<itm.length;j++){
			$Q(itm[j].element).remove();
		}
	}	
}
//设置点
function setPoint(point){
	svg.addLine({
		x1 : point[0] - svg.pointx / 10,
		y1 : point[1] - svg.pointy / 10,
		x2 : point[0] + svg.pointx / 10,
		y2 : point[1] + svg.pointy / 10
	});
	svg.addLine({
		x1 : point[0] + svg.pointx / 10,
		y1 : point[1] - svg.pointy / 10,
		x2 : point[0] - svg.pointx / 10,
		y2 : point[1] + svg.pointy / 10
	});
}
setPoint([svg.pointx * 2,svg.pointy * 3]);
setPoint([svg.pointx * 8,svg.pointy * 3]);
setPoint([svg.pointx * 1,svg.pointy * 4]);
setPoint([svg.pointx * 3,svg.pointy * 4]);
setPoint([svg.pointx * 5,svg.pointy * 4]);
setPoint([svg.pointx * 7,svg.pointy * 4]);
setPoint([svg.pointx * 9,svg.pointy * 4]);
setPoint([svg.pointx * 2,svg.pointy * 8]);
setPoint([svg.pointx * 8,svg.pointy * 8]);
setPoint([svg.pointx * 1,svg.pointy * 7]);
setPoint([svg.pointx * 3,svg.pointy * 7]);
setPoint([svg.pointx * 5,svg.pointy * 7]);
setPoint([svg.pointx * 7,svg.pointy * 7]);
setPoint([svg.pointx * 9,svg.pointy * 7]);
//设置棋子
function Piece(opts){
	var ths = this;
	this.opts = $Q.opts(opts,{
		color:'red',
		point:[0,0],//当前所在的点位
		text:"",
		map:null,//地图的svg
		nextrule:null,//下一个角色位置
	},'text');
	//目标信息,兵势信息
	this.nextlist = [];
	//当前颜色
	this.color = this.opts.color;
	//下一步棋子的路劲
	this.nextrule = this.opts.nextrule;
	//棋子点位
	this.point = this.opts.point;
	//棋子
	this.piece = new $Q.plugIn.Svg({
		width:this.opts.map.pointx,
		height:this.opts.map.pointy
	});
	//地图
	this.map = this.opts.map;
	this.piece.addEllipse({
		rx:this.map.pointx / 2 - 1,
		ry:this.map.pointy / 2 - 1,
		fill:opts.color,
		"stroke-width":2,
		"stroke":"#000",
		cx:this.map.pointx / 2,
		cy:this.map.pointy / 2
	});
	this.piece.addText({
		text:opts.text,
		x:this.map.pointx * 0.25,
		y:this.map.pointy * 0.7,
		style:"color:#fff;font-size: "+(this.map.pointx / 2)+"px;"
	});
	//显示下一步棋的可显示点位
	this.showNextPoint = function(){
		this.map.emptyLivepieceNext();
		var points = this.nextrule();
		for(var i = 0;i<points.length;i++){
			var point = points[i];
			if(this.color=='blue'){
				var point = this.map.bluePoint(point,[this.map.pointx / 64,this.map.pointy / 64]);
			}else{
				var point = this.map.redPoint(point,[this.map.pointx / 64,this.map.pointy / 64]);	
			}
			this.nextlist.push(this.map.addEllipse({
				rx:this.map.pointx / 8 - 1,
				ry:this.map.pointy / 8 - 1,
				fill:opts.color,
				"stroke-width":2,
				"stroke":"#000",
				cx:point[0],
				cy:point[1]
			}));
		}
	};
	//棋子的获取点击
	//document.getElementById().addEventListener(
	$Q(this.piece.svg).on('click',function(e){
		//点击事件
		$Q(this).find("text").attr("stroke","black");
		ths.showNextPoint();
	});
	
	if(opts.color=='blue'){
		var point = this.map.bluePoint(this.opts.point,[0.5 * this.map.pointx,0.5 * this.map.pointy]);
	}else{
		var point = this.map.redPoint(this.opts.point,[0.5 * this.map.pointx,0.5 * this.map.pointy]);	
	}
	this.map.livepiece.push(this);
	this.map.addSvg(this.piece,point[0],point[1]);
}
var ljiang = new Piece({
	map:svg,
	color:'blue',
	text:"将",
	point:[5,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		list.push([this.point[0]+1,this.point[1]]);
		list.push([this.point[0]-1,this.point[1]]);
		list.push([this.point[0],this.point[1]+1]);
		list.push([this.point[0],this.point[1]-1]);
		return list;
	}
	
});
var lshi1 = new Piece({
	map:svg,
	color:'blue',
	text:"士",
	point:[4,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		/*for(var x = 4;x<=6;x++){
			for(var y = 1;y<=3;y++){
				if(((x-3) * y %2)){
					list.push([x,y]);
				}
				
			}	
		}*/
		var x = this.point[0];
		var y = this.point[1];
		list.push([this.point[0]+1,this.point[1]+1]);
		list.push([this.point[0]+1,this.point[1]-1]);
		list.push([this.point[0]-1,this.point[1]+1]);
		list.push([this.point[0]-1,this.point[1]-1]);
		return list;
	}
});
var lshi2 = new Piece({
	map:svg,
	color:'blue',
	text:"士",
	point:[6,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		/*for(var x = 4;x<=6;x++){
			for(var y = 1;y<=3;y++){
				if(((x-3) * y %2)){
					list.push([x,y]);
				}
				
			}	
		}*/
		var x = this.point[0];
		var y = this.point[1];
		list.push([this.point[0]+1,this.point[1]+1]);
		list.push([this.point[0]+1,this.point[1]-1]);
		list.push([this.point[0]-1,this.point[1]+1]);
		list.push([this.point[0]-1,this.point[1]-1]);
		return list;
	}
});
var lxiang1 = new Piece({
	map:svg,
	color:'blue',
	text:"象",
	point:[3,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		list.push([this.point[0]+2,this.point[1]+2]);
		list.push([this.point[0]+2,this.point[1]-2]);
		list.push([this.point[0]-2,this.point[1]+2]);
		list.push([this.point[0]-2,this.point[1]-2]);
		return list;
	}
});
var lxiang2 = new Piece({
	map:svg,
	color:'blue',
	text:"象",
	point:[7,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		list.push([this.point[0]+2,this.point[1]+2]);
		list.push([this.point[0]+2,this.point[1]-2]);
		list.push([this.point[0]-2,this.point[1]+2]);
		list.push([this.point[0]-2,this.point[1]-2]);
		return list;
	}
});
var lma1 = new Piece({
	map:svg,
	color:'blue',
	text:"馬",
	point:[2,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		var dx = 1;
		var dy = 1;
		if(dx){
			dx = dx + dx;
			list.push([this.point[0] + dx,this.point[1]+1]);
			list.push([this.point[0] + dx,this.point[1]-1]);
			list.push([this.point[0] - dx,this.point[1]+1]);
			list.push([this.point[0] - dx,this.point[1]-1]);
		}
		if(dy){
			dy = dy + dy;
			list.push([this.point[0] + 1,this.point[1] + dy]);
			list.push([this.point[0] - 1,this.point[1] + dy]);
			list.push([this.point[0] + 1,this.point[1] - dy]);
			list.push([this.point[0] - 1,this.point[1] - dy]);
		}
		
		return list;
	}
});
var lma2 = new Piece({
	map:svg,
	color:'blue',
	text:"馬",
	point:[8,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		var dx = 1;
		var dy = 1;
		if(dx){
			dx = dx + dx;
			list.push([this.point[0] + dx,this.point[1]+1]);
			list.push([this.point[0] + dx,this.point[1]-1]);
			list.push([this.point[0] - dx,this.point[1]+1]);
			list.push([this.point[0] - dx,this.point[1]-1]);
		}
		if(dy){
			dy = dy + dy;
			list.push([this.point[0] + 1,this.point[1] + dy]);
			list.push([this.point[0] - 1,this.point[1] + dy]);
			list.push([this.point[0] + 1,this.point[1] - dy]);
			list.push([this.point[0] - 1,this.point[1] - dy]);
		}
		
		return list;
	}
});
var lju1 = new Piece({
	map:svg,
	color:'blue',
	text:"車",
	point:[1,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var lju2 = new Piece({
	map:svg,
	color:'blue',
	text:"車",
	point:[9,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var lpao1 = new Piece({
	map:svg,
	color:'blue',
	text:"砲",
	point:[2,3],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var lpao2 = new Piece({
	map:svg,
	color:'blue',
	text:"砲",
	point:[8,3],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var lbing1 = new Piece({
	map:svg,
	color:'blue',
	text:"卒",
	point:[1,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var lbing2 = new Piece({
	map:svg,
	color:'blue',
	text:"卒",
	point:[3,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var lbing3 = new Piece({
	map:svg,
	color:'blue',
	text:"卒",
	point:[5,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var lbing4 = new Piece({
	map:svg,
	color:'blue',
	text:"卒",
	point:[7,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var lbing5 = new Piece({
	map:svg,
	color:'blue',
	text:"卒",
	point:[9,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});

var rjiang = new Piece({
	map:svg,
	color:'red',
	text:"帅",
	point:[5,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		list.push([this.point[0]+1,this.point[1]]);
		list.push([this.point[0]-1,this.point[1]]);
		list.push([this.point[0],this.point[1]+1]);
		list.push([this.point[0],this.point[1]-1]);
		return list;
	}
});
var rshi1 = new Piece({
	map:svg,
	color:'red',
	text:"仕",
	point:[4,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		/*for(var x = 4;x<=6;x++){
			for(var y = 1;y<=3;y++){
				if(((x-3) * y %2)){
					list.push([x,y]);
				}
				
			}	
		}*/
		var x = this.point[0];
		var y = this.point[1];
		list.push([this.point[0]+1,this.point[1]+1]);
		list.push([this.point[0]+1,this.point[1]-1]);
		list.push([this.point[0]-1,this.point[1]+1]);
		list.push([this.point[0]-1,this.point[1]-1]);
		return list;
	}
});
var rshi2 = new Piece({
	map:svg,
	color:'red',
	text:"仕",
	point:[6,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		/*for(var x = 4;x<=6;x++){
			for(var y = 1;y<=3;y++){
				if(((x-3) * y %2)){
					list.push([x,y]);
				}
				
			}	
		}*/
		var x = this.point[0];
		var y = this.point[1];
		list.push([this.point[0]+1,this.point[1]+1]);
		list.push([this.point[0]+1,this.point[1]-1]);
		list.push([this.point[0]-1,this.point[1]+1]);
		list.push([this.point[0]-1,this.point[1]-1]);
		return list;
	}
});
var rxiang1 = new Piece({
	map:svg,
	color:'red',
	text:"相",
	point:[3,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		list.push([this.point[0]+2,this.point[1]+2]);
		list.push([this.point[0]+2,this.point[1]-2]);
		list.push([this.point[0]-2,this.point[1]+2]);
		list.push([this.point[0]-2,this.point[1]-2]);
		return list;
	}
	
});
var rxiang2 = new Piece({
	map:svg,
	color:'red',
	text:"相",
	point:[7,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		list.push([this.point[0]+2,this.point[1]+2]);
		list.push([this.point[0]+2,this.point[1]-2]);
		list.push([this.point[0]-2,this.point[1]+2]);
		list.push([this.point[0]-2,this.point[1]-2]);
		return list;
	}
});
var rma1 = new Piece({
	map:svg,
	color:'red',
	text:"傌",
	point:[2,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		var dx = 1;
		var dy = 1;
		if(dx){
			dx = dx + dx;
			list.push([this.point[0] + dx,this.point[1]+1]);
			list.push([this.point[0] + dx,this.point[1]-1]);
			list.push([this.point[0] - dx,this.point[1]+1]);
			list.push([this.point[0] - dx,this.point[1]-1]);
		}
		if(dy){
			dy = dy + dy;
			list.push([this.point[0] + 1,this.point[1] + dy]);
			list.push([this.point[0] - 1,this.point[1] + dy]);
			list.push([this.point[0] + 1,this.point[1] - dy]);
			list.push([this.point[0] - 1,this.point[1] - dy]);
		}
		
		return list;
	}
});
var rma2 = new Piece({
	map:svg,
	color:'red',
	text:"傌",
	point:[8,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		var dx = 1;
		var dy = 1;
		if(dx){
			dx = dx + dx;
			list.push([this.point[0] + dx,this.point[1]+1]);
			list.push([this.point[0] + dx,this.point[1]-1]);
			list.push([this.point[0] - dx,this.point[1]+1]);
			list.push([this.point[0] - dx,this.point[1]-1]);
		}
		if(dy){
			dy = dy + dy;
			list.push([this.point[0] + 1,this.point[1] + dy]);
			list.push([this.point[0] - 1,this.point[1] + dy]);
			list.push([this.point[0] + 1,this.point[1] - dy]);
			list.push([this.point[0] - 1,this.point[1] - dy]);
		}
		
		return list;
	}
});
var rju1 = new Piece({
	map:svg,
	color:'red',
	text:"俥",
	point:[1,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var rju2 = new Piece({
	map:svg,
	color:'red',
	text:"俥",
	point:[9,1],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var rpao1 = new Piece({
	map:svg,
	color:'red',
	text:"炮",
	point:[2,3],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var rpao2 = new Piece({
	map:svg,
	color:'red',
	text:"炮",
	point:[8,3],
	nextrule:function(){
		//砲的类型比较丰富，需要大量的格子
		var list = [];
		for(var x = 1;x<svg.mx;x++){
			list.push([x,this.point[1]]);
		}
		for(var y = 1;y<svg.my;y++){
			list.push([this.point[0],y]);
		}
		return list;
	}
});
var rbing1 = new Piece({
	map:svg,
	color:'red',
	text:"兵",
	point:[1,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var rbing2 = new Piece({
	map:svg,
	color:'red',
	text:"兵",
	point:[3,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var rbing3 = new Piece({
	map:svg,
	color:'red',
	text:"兵",
	point:[5,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var rbing4 = new Piece({
	map:svg,
	color:'red',
	text:"兵",
	point:[7,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
var rbing5 = new Piece({
	map:svg,
	color:'red',
	text:"兵",
	point:[9,4],
	nextrule:function(){
		//兵只能前进，意味着，下一步只能是x加一
		return [
			[this.point[0],this.point[1]+1]
		];
	}
});
console.log(svg);
//角色信息
//720*500
/*var role = new $Q.plugIn.Svg({
	width:100,
	height:144,
});
role.addImage({
	width:500,
	height:720,
	url:"./img/role.png",
	transform:"scale(0.2,0.2)"
});
//svg.addSvg(svg2);
svg.addSvg(role);*/

document.getElementById("mydiv").appendChild(svg.toElement());
</script>
</html>
